<extend name="Base/base" />

<block name="main">
    <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            <i class="fa fa-calendar"></i>
			       会员管理
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">会员管理</a></li>
            <li class="active">添加会员</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <!-- right column -->
            <div class="col-md-12">
              <!-- Horizontal Form -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title"><i class="fa fa-plus"></i> 添加会员信息</h3>
                </div><!-- /.box-header -->
                <!-- form start -->
                <form class="form-horizontal" action="__CONTROLLER__/insert" method="post" onsubmit="return doSubmit()">
                  <div class="box-body">
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">用户名</label><span style="font-size:12px;color:#fc0;" id="user"></span>
                      <div class="col-sm-4">
                        <input type="input" class="form-control" name="username" placeholder="UserName" onblur="checkUserName()" onfocus="checkUser()">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label><span style="font-size:12px;color:#fc0;" id="email"></span>
                      <div class="col-sm-4">
                        <input type="email" class="form-control" name="email" placeholder="Email" onblur="checkEmail()" onfocus="checkEm()">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="inputPassword3"  class="col-sm-2 control-label">密码</label><span style="font-size:12px;color:#fc0;" id="pass"></span>
                      <div class="col-sm-4">
                        <input type="password" class="form-control" name="pass" placeholder="Password"  onblur="checkPass()" onfocus="checkPassWd()">
                      </div>
                    </div>
				          	<div class="form-group">
                      <label for="inputPassword3"  class="col-sm-2 control-label">确认密码</label><span style="font-size:12px;color:#fc0;" id="qrpass"></span>
                      <div class="col-sm-4">
                        <input type="password" class="form-control" name="qrpass" placeholder="Password"  onblur="checkRPass()" onfocus="checkRPassWd()">
                      </div>
                    </div>
                    <!-- <div class="form-group">
                      <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                          <label>
                            <input type="checkbox"> 是否启用
                          </label>
                        </div>
                      </div>
					  
                    </div> -->
					
                  </div><!-- /.box-body -->
                  <div class="box-footer">
          				    <div class="col-sm-offset-2 col-sm-1">
          						    <button type="submit" class="btn btn-primary">添加</button>
                      </div>
          					  <div class="col-sm-1">
          						    <button type="reset" class="btn btn-primary">重置</button>
          					  </div>
                  </div><!-- /.box-footer -->
                </form>
				        <div class="row"><div class="col-sm-12">&nbsp;</div></div>
              </div><!-- /.box -->
       
            </div><!--/.col (right) -->
          </div>   <!-- /.row -->
        </section><!-- /.content -->
</block>
<block name="myscript">
  <literal>
      <script type="text/javascript">
          //表单提交限制
          function doSubmit() {
            return checkUserName()&&checkEmail()&&checkPass()&&checkRPass();
          }
          //检测用户名
          function checkUser() {
            var user = $("input[name='username']").val();
            $("#user").html("账号由5-12位字母、数字或下划线组成");
            $("#user").css("color","#fc0");
          }          
          function checkUserName() {
            var user = $("input[name='username']").val();
            if(user.match(/^[a-zA-Z0-9_]{5,12}$/)==null){
                 $("#user").html("请输入正确的账户格式");
                 $("#user").css("color","red");
                return false;
            }else if(user.match(/(^\_)|(\__)|(\_+$)/)){
                $("#user").html("用户名首尾不能出现下划线\'_\'");
                $("#user").css("color","red");
                return false;
            }else if(user.match(/^\d+\d+\d$/)){
                 $("#user").html("用户名不能全为数字");
                 $("#user").css("color","red");
                return false;
            }else{
                 $("#user").html("");
                 $("#user").css("color","#fc0");
                 return true;
            }
          }
          //检测邮箱
          function checkEm() {
            var email = $("input[name='email']").val();
            $("#email").html("邮箱格式为：xxx@xx.xx");
            $("#email").css("color","#fc0");
          }
          function checkEmail() {
            var email = $("input[name='email']").val();
            if(email.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)==null){
                 $("#email").html("请输入正确的邮箱");
                 $("#email").css("color","red");
                return false;
            }else{
                 $("#email").html("");
                 $("#email").css("color","#fc0");
                 return true;
            }
          }

          //检测密码
          function checkPassWd() {
            var pass = $("input[name='pass']").val();
            $("#pass").html("密码长度为6-18位");
            $("#pass").css("color","#fc0");
          }
          function checkPass() {
             var pass = $("input[name='pass']").val();
            if(pass.match(/^(.+){6,18}$/)==null){
                 $("#pass").html("请按要求输入密码");
                 $("#pass").css("color","red");
                return false;
            }else if(pass.match(/^\d+\d+\d$/)){
                 $("#pass").html("密码不能全为数字");
                 $("#pass").css("color","red");
                return false;
            }else{
                 $("#pass").html("");
                 $("#pass").css("color","#fc0");
                 return true;
            }
          }
          function checkRPassWd() {
            var pass = $("input[name='qrpass']").val();
            $("#qrpass").html("请再次输入密码");
            $("#qrpass").css("color","#fc0");
          }
          function checkRPass() {
            var pass   = $("input[name='pass']").val();
            var qrpass = $("input[name='qrpass']").val();
            if (pass!=qrpass) {
                $("#qrpass").html("确认密码与密码不一致");
                $("#qrpass").css("color","red");
                return false;
            }
          } 
      </script>
  </literal>
</block>